<!-- subpkg_medicine/payment/index.vue -->
<script lang="ts" setup>
import { addressListApi, getPatientMedicineOrder, getPatientMedicineOrderPre } from '@/apis/order'
import { payConsultOrderAPI } from '@/apis/quickEntry'
import type { CustomPaymentInstance } from '@/types/global-components'
import type { Address, Medicine, OrderPre } from '@/types/order'
import { ref } from 'vue'
const props = defineProps<{
  prescriptionId: string
}>()

const addressInfo = ref()
const orderInfo = ref<OrderPre>()
const orderPreData = ref<Medicine[]>([])
const address = async () => {
  const res = await addressListApi()
  addressInfo.value = res.data.find((item) => item.isDefault === 1)
  if (!props.prescriptionId) return
  const rul = await getPatientMedicineOrderPre(props.prescriptionId)
  orderPreData.value = rul.data.medicines
  orderInfo.value = rul.data
  console.log('rul', rul)
}
address()
const MedicineOrderId = ref()
const paymentRef = ref<CustomPaymentInstance>()
const handlePay = async () => {
  const res = await getPatientMedicineOrder({
    id: orderInfo.value!.id,
    couponId: orderInfo.value!.couponId,
    addressId: addressInfo.value!.id,
  })
  console.log('res', res)
  MedicineOrderId.value = res.data.id
  paymentRef.value.open()
}
const handleClose = async () => {
  const res = await uni.showModal({
    title: '关闭支付',
    content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
    cancelText: '仍要关闭',
    cancelColor: '#848484',
    confirmText: '继续支付',
    confirmColor: '#16C2A3',
  })
  if (res.cancel) {
    paymentRef.value?.close?.()
  } else {
    return
  }
}
const handleConfirm = async (index: number) => {
  if (index === 0) {
    return uni.showToast({ title: '微信支付暂不支持', icon: 'none' })
  } else {
    const res = await payConsultOrderAPI({
      orderId: MedicineOrderId.value,
      paymentMethod: '1',
      payCallback: 'http://localhost:5173/#/subpkg_medicine/pay_result/pay_result',
    })
    location.href = res.data.payUrl
  }
}
const handleChange = (index: number) => {
  console.log('index', index)
}
</script>

<template>
  <scroll-view background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo?.province }}
            {{ addressInfo?.city }}
            {{ addressInfo?.county }}
          </view>
          <view class="detail">{{ addressInfo?.addressDetail }}</view>
          <view class="receiver">
            {{ addressInfo?.receiver }}
            {{ addressInfo?.mobile }}
          </view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in orderPreData" :key="item.id">
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">用法用量：{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${orderInfo?.payment || 0}`" />
          <uni-list-item title="运费" :right-text="`¥${orderInfo?.expressFee || 0}`" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${orderInfo?.couponDeduction || 0}`"
          />
          <uni-list-item title="实付款" :right-text="`¥${orderInfo?.actualPayment || 0}`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ orderInfo?.actualPayment }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="handlePay">立即支付</button>
        </view>
        <custom-payment
          ref="paymentRef"
          v-if="orderInfo"
          :order-id="orderInfo.id"
          :account="orderInfo.actualPayment"
          @close="handleClose"
          @confirm="handleConfirm"
          @change="handleChange"
        />
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
